<template>
  <div class="form">
    <div>
      <input placeholder="手机或邮箱" v-model="ph" class="border rounded" />
    </div>
    <div>
      <input placeholder="密码" v-model="pw" class="border rounded" />
    </div>
    <div>
      <button @click="loginFn">登录</button>
      <!-- <el-button class="btn border" @click="loginFn">登录</el-button> -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      ph: "",
      pw: "",
    };
  },
  computed: {
    ...mapState(["userModule"]),
  },

  methods: {
    loginFn() {
      if (this.ph.length == 0 || this.pw.length == 0) {
        return;
      }
      let _this = this;
      this.axios
        .get("/user.json")
        .then((res) => {
          let data = res.data;
          if (data.phone == this.ph) {
            if (data.password == this.pw) {
              this.$message({
                message: "登录成功",
                type: "success",
                center: true,
                offset: 200,
                duration: 1500,
              });
              this.$store.dispatch("userModule/setUserToken", data.token);
              localStorage.setItem("userToken", data.token);
              setTimeout(() => {
                this.$router.push("/");
              }, 2000);
            } else {
              this.$message({
                message: "密码错误",
                type: "error",
                center: true,
                offset: 200,
                duration: 1500,
              });
            }
          } else {
            this.$message({
              message: "手机号错误",
              type: "error",
              center: true,
              offset: 200,
              duration: 1500,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/reset";
.form {
  padding-top: 20px;
  > div {
    display: flex;
    justify-content: center;
    margin-top: 30px;

    width: 400px;
    height: 40px;

    input,
    button {
      width: 300px;
      height: 40px;
    }
    input {
      padding-left: 10px;
    }
    button {
      font-size: 18px;
      background-color: #53b3e0;
      color: #fff;
    }
  }
}
.prop {
  background-color: #ea825f;
}
</style>